<template>
  <div id="admin">
    <vheader></vheader>
    <div class="content">
      <div id="menuComponent" :class="'menu'" >
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
        >
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title"><a href="/admin" title="发布商品" >控制面板</a></span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <li v-for="(item ,index) in menuList" :key="index" @click="changeComponent(item.name)" class="el-menu-item" style="padding-left: 50px; color: rgb(255, 255, 255); background-color: rgb(84, 92, 100);"><span v-text="item.title"></span></li>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span slot="title">会员管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!--<menuComponent ></menuComponent>-->
      <div class="content-right box-right">
        <component :is="menuCurrentView"></component>
      </div>
    </div>
  </div>
</template>

<script>
import vheader from '../admin/common/header'
// import menuComponent from '../admin/common/menuComponent'
import store from '@/vuex/store'
import defaultPage from '../admin/Index'
import GoodsAdd from '../admin/goods/GoodsAdd'
import goodsList from '../admin/goods/GoodsList'
import goodsCatsAdd from '../admin/goods/GoodsCatadd'
export default {
  name: 'admin',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      defaultPage: 'defaultPage',
      currentName: 'defaultPage',
      // menuCurrentView: this.$store.state.menuValue,
      menuList: [
        {title: '发布商品', name: 'goodsAdd'},
        {title: '商品列表', name: 'goodsList'},
        {title: '添加分类', name: 'goodsCatsAdd'}]
    }
  },
  mounted: function () {
    this.changeCurrentView()
  },
  methods: {
    changeComponent: function (page) {
      var params = {
        page: page
      }

      this.$store.dispatch('changeMenuView', params)
      this.$router.push({name: 'admin', query: {name: page}})
      console.log('page:' + page)

      console.log('12:' + this.$store.state.menuValue)
      this.currentName = page
      // if(page=="powerManage"){
      //   this.$store.dispatch("changeActive","inter");
      // }
    },
    changeCurrentView () { // 刷新页面定位到当前组件
      let path = ''
      let params = null
      console.log(this.$route.query.name)
      if (this.$route.query.name) {
        path = this.$route.query.name
        params = {
          page: this.$route.query.page || this.$route.query.name,
          id: this.$route.query.id
        }
      } else {
        path = this.currentName
        params = {
          page: path
        }
      }
      this.currentName = path
      this.$store.dispatch('changeMenuView', params)
    }
  },
  computed: {
    menuCurrentView: function () {
      return this.$store.state.menuValue
    }
  },
  store,
  components: {
    vheader,
    defaultPage,
    GoodsAdd,
    goodsList,
    goodsCatsAdd
  }
}
</script>

<style lang="less">
  .content {
    width: 100%;
    background: #e7ebf3;
    margin: 0 auto;
    overflow: hidden;
  }
  .menu {
    width: 210px;
    height: 100%;
    display: block;
    float: left;
    background: #fff;
    height: 100%;
    min-height: calc(~"100vh - 88px");
    .is-active{
      color: #ffd04b;
    }
    a {
      line-height: 50px;
      height: 50px;
      font-size: 14px;
      color: #fff;
      padding: 0 10px;
    }
    ul li {
      color: #8f8f8f;
      padding: 15px auto;
      cursor: pointer;
    }
    .menu-active {
      background: #373737;
      color: #fff;
    }
    i {
      margin-right: 20px;
      color: #999999;
      font-size: 20px;
    }
  }
  .menu-bor-r {
    border-right: 1px solid #d2dae9;
  }
  .content-right, .box-big-right {
    width: calc(~"100% - 314px");
    float: left;
    min-height: 88vh;
  }
  .box-right {
    padding-left: 15px;
    margin-top: 15px;
  }
  .box-big-right {
    width: calc(~"100% - 50px");
  }
</style>
